<template>
  <footer class="footer">
    <!-- 统计数量 -->
    <span class="todo-count">剩余<strong>{{list.length}}</strong></span>
    <ul class="filters" @click="screen">
      <li>
        <a @click="isSel='all'" :class="{selected:isSel=='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="isSel='no'" :class="{selected:isSel=='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isSel='yes'" :class="{selected:isSel=='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button @click="qingchu"   class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
props:['list'],
data() {
  return {
    // 三种状态 all no yes
    isSel:'all'
  }
},
methods:{
  screen(){
    this.$emit('screen',this.isSel)
  },
  qingchu(){
    this.$emit('qingchu')
  }
}
}
</script>